<template>
  <div>
    <div>
      <el-row class="bgc">
        <el-col :span="24"> 房产信息</el-col>
      </el-row>
      <div v-for="(item, index) in loanInfo.houseList" :key="index">
        <el-form :label-position="labelPosition" label-width="160px" :model="item" :inline="true">
          <el-form-item label="证件类型">
            <el-input v-model="item.idType" disabled />
          </el-form-item>
          <el-form-item label="权属编号">
            <el-input v-model="item.no" disabled />
          </el-form-item>
          <el-form-item label="楼栋号">
            <el-input v-model="item.buildingNum" disabled> </el-input>
          </el-form-item>
          <el-form-item label="房地坐落">
            <el-input v-model="item.buildingAddress" disabled> </el-input>
          </el-form-item>
          <el-form-item label="宗地号">
            <el-input v-model="item.landNum" disabled />
          </el-form-item>
          <el-form-item label="结构">
            <el-input v-model="item.build" disabled />
          </el-form-item>
          <el-form-item label="总层数">
            <el-input v-model="item.layers" disabled> </el-input>
          </el-form-item>
          <el-form-item label="房屋所有权人">
            <el-input v-model="item.owner" disabled> </el-input>
          </el-form-item>
          <el-form-item label="使用年限">
            <el-input v-model="item.ownerYears" disabled> </el-input>
          </el-form-item>
          <el-form-item label="层数">
            <el-input v-model="item.buildingLayers" disabled> </el-input>
          </el-form-item>
          <el-form-item label="建筑面积">
            <el-input v-model="item.buildingArea" disabled> </el-input>
          </el-form-item>
          <el-form-item label="所有权性质">
            <el-input v-model="item.ownerType" disabled> </el-input>
          </el-form-item>
          <el-form-item label="用途">
            <el-input v-model="item.useTo" disabled> </el-input>
          </el-form-item>
          <el-form-item label="共有情况">
            <el-input v-model="item.share" disabled> </el-input>
          </el-form-item>
          <el-form-item label="登记日期">
            <el-input v-model="item.registerTime" disabled> </el-input>
          </el-form-item>
          <el-form-item label="使用权取得方式">
            <el-input v-model="item.ownerWay" disabled> </el-input>
          </el-form-item>
          <el-form-item label="权利人">
            <el-input v-model="item.ownerName" disabled> </el-input>
          </el-form-item>
          <el-form-item label="权属性质">
            <el-input v-model="item.ownerNature" disabled> </el-input>
          </el-form-item>
          <el-form-item label="使用权类型">
            <el-input v-model="item.useType" disabled> </el-input>
          </el-form-item>
          <el-form-item label="土地用途">
            <el-input v-model="item.landNature" disabled> </el-input>
          </el-form-item>
          <el-form-item label="终止日期">
            <el-input v-model="item.endTime" disabled> </el-input>
          </el-form-item>
          <el-form-item label="套内建筑面积">
            <el-input v-model="item.roomArea" disabled> </el-input>
          </el-form-item>
          <el-form-item label="合计建筑面积">
            <el-input v-model="item.totalArea" disabled> </el-input>
          </el-form-item>
          <el-row class="bgc">
            <el-col :span="24"> 影像采集</el-col>
          </el-row>
          <div class="box_flex">
            <div class="box" v-for="(item, index) in houseListImg" :key="index">
              <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
              <div v-else class="img_box">暂无图片</div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div>
      <el-row class="bgc">
        <el-col :span="24"> 车产信息</el-col>
      </el-row>
      <div v-for="(item, index) in loanInfo.carList" :key="index">
        <el-form :label-position="labelPosition" label-width="160px" :model="item" :inline="true">
          <el-form-item label="机动车登记编号">
            <el-input v-model="item.registerNum" disabled />
          </el-form-item>
          <el-form-item label="身份证明名称">
            <el-input v-model="item.idName" disabled />
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="item.idNo" disabled> </el-input>
          </el-form-item>
          <el-form-item label="登记机关">
            <el-input v-model="item.organ" disabled> </el-input>
          </el-form-item>
          <el-form-item label="登记日期">
            <el-input v-model="item.registerTime" disabled />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="item.name" disabled />
          </el-form-item>
          <el-form-item label="车辆类型">
            <el-input v-model="item.type" disabled />
          </el-form-item>
          <el-form-item label="车辆品牌">
            <el-input v-model="item.brand" disabled />
          </el-form-item>
          <el-form-item label="车身颜色">
            <el-input v-model="item.color" disabled />
          </el-form-item>
          <el-form-item label="车辆型号">
            <el-input v-model="item.model" disabled />
          </el-form-item>
          <el-form-item label="车辆识别代号">
            <el-input v-model="item.code" disabled />
          </el-form-item>
          <el-form-item label="国产/进口">
            <el-input v-model="item.source" disabled />
          </el-form-item>
          <el-form-item label="发动机型号">
            <el-input v-model="item.engineType" disabled />
          </el-form-item>
          <el-form-item label="发动机号">
            <el-input v-model="item.engine" disabled />
          </el-form-item>
          <el-form-item label="燃料种类">
            <el-input v-model="item.fuel" disabled />
          </el-form-item>
          <el-form-item label="排量">
            <el-input v-model="item.displacement" disabled />
          </el-form-item>
          <el-form-item label="驾驶室载客(人)">
            <el-input v-model="item.carrying" disabled />
          </el-form-item>
          <el-form-item label="使用性质">
            <el-input v-model="item.useNature" disabled />
          </el-form-item>
          <el-form-item label="车辆出厂日期">
            <el-input v-model="item.createTime" disabled />
          </el-form-item>
          <el-form-item label="发证日期">
            <el-input v-model="item.issuanceTime" disabled />
          </el-form-item>
          <el-row class="bgc">
            <el-col :span="24"> 影像采集</el-col>
          </el-row>
          <div class="box_flex">
            <div class="box" v-for="(item, index) in carListImg" :key="index">
              <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
              <div v-else class="img_box">暂无图片</div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div>
      <el-row class="bgc">
        <el-col :span="24"> 不动产信息</el-col>
      </el-row>
      <div v-for="(item, index) in loanInfo.realList" :key="index">
        <el-form :label-position="labelPosition" label-width="160px" :model="item" :inline="true">
          <el-form-item label="编号">
            <el-input v-model="item.num" disabled />
          </el-form-item>
          <el-form-item label="不动产编号">
            <el-input v-model="item.realNum" disabled />
          </el-form-item>
          <el-form-item label="权利人">
            <el-input v-model="item.owner" disabled> </el-input>
          </el-form-item>
          <el-form-item label="共有情况">
            <el-input v-model="item.share" disabled> </el-input>
          </el-form-item>
          <el-form-item label="坐落">
            <el-input v-model="item.address" disabled />
          </el-form-item>
          <el-form-item label="不动产单元号">
            <el-input v-model="item.unitNum" disabled />
          </el-form-item>
          <el-form-item label="权利类型">
            <el-input v-model="item.ownerType" disabled />
          </el-form-item>
          <el-form-item label="权利性质">
            <el-input v-model="item.ownerNature" disabled />
          </el-form-item>
          <el-form-item label="用途">
            <el-input v-model="item.useTo" disabled />
          </el-form-item>
          <el-form-item label="面积">
            <el-input v-model="item.area" disabled />
          </el-form-item>
          <el-form-item label="使用期限">
            <el-input v-model="item.term" disabled />
          </el-form-item>
          <el-form-item label="权利其他状况">
            <el-input v-model="item.other" disabled />
          </el-form-item>
          <el-row class="bgc">
            <el-col :span="24"> 影像采集</el-col>
          </el-row>
          <div class="box_flex">
            <div class="box" v-for="(item, index) in ralListImg" :key="index">
              <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
              <div v-else class="img_box">暂无图片</div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name="Gen">
import { Search } from "@element-plus/icons-vue";
import { reactive, ref, nextTick } from "vue";
import { queryOrgTree } from "@/api/org";
import { onMounted } from "vue";
import { ElMessageBox, ElTree } from "element-plus";

const treeRef = ref();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const loading = ref(false);

const labelPosition = ref("right");
const state = reactive({
  loanInfo: {}, //担保信息
  houseListImg: [], //担保信息
  carListImg: [], //担保信息
  ralListImg: [], //担保信息
});
const { loanInfo, houseListImg, ralListImg, carListImg } = toRefs(state);

const props = defineProps({
  dataFrom: {
    type: Object,
    required: true,
  },
});
onMounted(() => {
  setTimeout(() => {
    loanInfo.value = props.dataFrom.mortgage;
    if (loanInfo.value.houseList[0].imgPath != null && loanInfo.value.houseList[0].imgPath != "") {
      houseListImg.value = loanInfo.value.houseList[0].imgPath.split(",");
    } else {
      loanInfo.value.houseList[0].imgPath = "";
      houseListImg.value = loanInfo.value.houseList[0].imgPath.split(",");
    }
    console.log(loanInfo.value.carList[0].imgPath, "loanInfo.value.carList[0].imgPath");
    if (loanInfo.value.carList[0].imgPath != null && loanInfo.value.carList[0].imgPath != "") {
      carListImg.value = loanInfo.value.carList[0].imgPath.split(",");
    } else {
      loanInfo.value.carList[0].imgPath = "";
      carListImg.value = loanInfo.value.carList[0].imgPath.split(",");
    }
    if (loanInfo.value.realList[0].imgPath != null && loanInfo.value.realList[0].imgPath != "") {
      ralListImg.value = loanInfo.value.realList[0].imgPath.split(",");
      console.log(ralListImg.value, "ralListImg.value");
    } else {
      loanInfo.value.realList[0].imgPath = "";
      ralListImg.value = loanInfo.value.realList[0].imgPath.split(",");
    }
  }, 400);
});
// getList();
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: left;
  span {
    display: block;
    padding-top: 5px;
    margin-left: 5px;
  }
}

.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}

.flexImg {
  width: 100%;
  padding-left: 20px;
  margin-bottom: 5px;
}
.box_flex {
  display: flex;
}
.box {
  margin-right: 20px;
}
.img_box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  line-height: 200px;
  text-align: center;
}

:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}

:deep(.el-overlay-dialog) {
  top: 500vh;
}
:deep(.el-aside) {
  margin: 0;
  padding: 0;
  border: 1px solid #dadbdc;
  background: #fff;
}

.title {
  height: 30px;
  line-height: 30px;
  background-color: #ebebeb;
  text-align: center;
}
.pd-5 {
  padding: 5px;
}
:deep(.el-affix) {
  width: 100% !important;
}
</style>
